<template>
  <div id="admin-index">
    <div class="indexPage">
      <div class="indexPage-info fl" @click="$router.push('TeacherList')">
        <div class="fl box" style="background: #fbb56b">
          <i class="el-icon-user-solid"></i>
        </div>
        <div class="fl rightd">
          <p style="font-size: 18px; font-weight: bold">{{ values.teacherCount }}</p>
          <p>讲师总人数</p>
        </div>
      </div>
      <div class="indexPage-info fl" @click="$router.push('LectureList')">
        <div class="fl box" style="background: #5a9acd">
          <i class="el-icon-s-order"></i>
        </div>
        <div class="fl rightd">
          <p style="font-size: 18px; font-weight: bold">{{ values.courseCount }}</p>
          <p>讲座总次数</p>
        </div>
      </div>
      <div class="indexPage-info fl" @click="$router.push('LectureList?type=1')">
        <div class="fl box" style="background: #aebedd">
          <i class="el-icon-video-camera-solid"></i>
        </div>
        <div class="fl rightd">
          <p style="font-size: 18px; font-weight: bold">{{ values.finishCourseCount }}</p>
          <p>已完成讲座</p>
        </div>
      </div>
      <div class="indexPage-info fl" @click="$router.push('LectureList')">
        <div class="fl box1" style="background: #95ccae">
          <i class="el-icon-s-custom"></i>
        </div>
        <div class="fl rightd">
          <p style="font-size: 18px; font-weight: bold">{{ values.toReadCourseCount }}</p>
          <p>待审批讲座</p>
        </div>
      </div>
    </div>
    <div></div>
    <div class="echarts">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="讲座情况" v-if="isPid">
          <casader :pid="form.pid" ref="child"></casader>
        </el-form-item>
        <el-form-item class="year" label="" v-if="isPid">
          <el-date-picker v-model="form.year" type="year" placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <div id="barChart" style="width: 100%; height: 500px"></div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getToken, setToken, getName, setName } from "@/utils/auth";
import echarts from "echarts";
import Casader from "../components/cascaderD";
export default {
  components: { Casader },
  data() {
    return {
      //是否读取完pid
      isPid: false,
      ChartPie: "",
      number: "",
      role: "",
      values: {},
      form: {
        //上级单位id
        pid: 0,
        //年
        year: "",
        //单位名称
        name: "",
        //单位人数
        num: "",
      },
    };
  },
  created() {
    this.form.year = new Date();
    this.role = getToken() - 0;
    //console.log(this.$store.state.user.roles[0],55667788);
    // if (this.role != 1) {
    //   this.$router.push({
    //     path: "/UserList",
    //     // path:'/UserList?time=092603'
    //   });
    //   return;
    // }
    this.init();
  },
  watch: {},
  methods: {
    init() {
      let self = this;
      this.getValue();
      this.getPid();
    },

    //下载
    downLoads() {
      let self = this;
      let pid = self.$refs.child.cx();
      const loading = self.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      self.$http
        .post(
          "/home/entry/download",
          {
            pid: pid,
          },
          { responseType: "blob" }
        )
        .then((response) => {
          let blob = new Blob([response.data], {
            type: response.headers["content-disposition"],
          });
          //console.log(response.headers['content-disposition'],55555);
          let fileName = "各机关本期排名.xlsx";
          let url = window.URL.createObjectURL(blob);
          let downloadElement = document.createElement("a");
          downloadElement.style.display = "none";
          downloadElement.href = url;
          downloadElement.download = fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(url);
          loading.close();
          console.log(1234);
        })
        .catch((err) => {
          console.log(err);
          loading.close();
        });
    },
    getValue() {
      let self = this;
      self.$http.get(`/index/statistics`).then(
        (response) => {
          let res = response.data;
          if (res.code == "200") {
            self.values = res.data;
          } else {
            self.$message.error(res.message);
          }
        },
        (err) => {
          console.log("err");
        }
      );
    },
    //获取pid
    getPid() {
      let self = this;
      self.$http.get("/admin/pid").then((response) => {
        let res = response.data;
        if (res.code == "200") {
          console.log(res, 111222);
          self.isPid = true;
          self.form.pid = res.data;
          console.log(self.form.pid, 2222222);
          self.$nextTick(function () {
            self.getList();
          });
        } else {
          self.$message.error(res.message);
        }
      });
    },
    getList() {
      let self = this;
      let pid = self.$refs.child.cx();
      let main = document.getElementById("barChart");
      let myChart = echarts.init(main);
      let year = self.form.year.getFullYear();
      myChart.showLoading({
        text: "数据正在加载...",
        textStyle: { fontSize: 30, color: "#444" },
        effectOption: { backgroundColor: "rgba(0, 0, 0, 0)" },
      });
      ///index/statisticsOrg?year=2021&org=1
      self.$http.get(`/index/statisticsOrg?year=${year}&org=${pid}`).then(
        (response) => {
          let res = response.data;
          if (res.code == "200") {
            //self.values = res.data
            self.drawShape(res.data);
          } else {
            self.$message.error(res.message);
          }
        },
        (err) => {
          console.log("err");
        }
      );
    },

    product() {
      this.$router.push({
        path: "/Productlist",
        query: { publishStatus: 1 },
      });
    },
    //王天宇
    //查询
    onSubmit() {
      this.getList();
    },
    //绘图
    drawShape(data) {
      let self = this;
      // let yAxis = data.map(item => item.orgNameArray);
      // let serData = data.map(item => item.letCountArray);
      let yAxis = data.orgNameArray;
      let serData = data.letCountArray;
      console.log();
      let myChart = document.getElementById("barChart");
      self.ChartPie = echarts.init(myChart);
      let option = {
        title: {
          //text: '世界人口总量',
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name:'讲座次数',
          type: "value",
          boundaryGap: [0, 0.01],
          minInterval:1,
        },
        yAxis: {
          name:'机构',
          type: "category",
          data: yAxis,
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: serData,
          },
        ],
      };
      self.ChartPie.setOption(option);
      self.ChartPie.hideLoading();
      window.addEventListener("resize", () => {
        self.ChartPie.resize();
      });
    },
    //王天宇
  },
};
</script>

<style scoped>
.el-input >>> .el-input__inner {
  width: 350px;
}
.mange {
  padding: 70px;
  overflow: hidden;
  width: 91%;
}
/deep/ .el-table__body,
/deep/ .el-table__header {
  width: auto !important;
}

.indexPage {
  padding: 70px;
  overflow: hidden;
}

.indexPage-info {
  margin-right: 40px;
  margin-bottom: 40px;
  cursor: pointer;
}
.box {
  width: 80px;
  background: #36cfca;
  height: 80px;
  text-align: center;
}
.box1 {
  width: 80px;
  background: #fd4d4f;
  height: 80px;
  text-align: center;
}
.box2 {
  width: 80px;
  background: #ffc53d;
  height: 80px;
  text-align: center;
}
.box3 {
  width: 80px;
  background: #42a7ff;
  height: 80px;
  text-align: center;
}
.box4 {
  width: 80px;
  background: #43c963;
  height: 80px;
  text-align: center;
}
.box5 {
  width: 80px;
  background: #9253df;
  height: 80px;
  text-align: center;
}
.rightd {
  border: 1px solid #e3e3e3;
  height: 80px;
  width: 200px;
  text-align: center;
  line-height: 80px;
}
.rightd p {
  line-height: 15px;
  padding-top: 18px;
  font-size: 16px;
}
.indexPage-number {
  text-align: right;
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}
i {
  color: #fff;
  font-size: 30px;
  line-height: 80px;
}
</style>
<!-- 王天宇 -->

<style lang="scss">
#admin-index {
  .echarts {
    padding: 0 70px 70px;
  }
  .el-cascader {
    width: auto !important;
    margin-right: 0 !important;
  }
  .el-form-item {
    .el-input {
      display: inline;
      .el-input__inner {
        width: 500px;
      }
    }
    .el-input.el-input--suffix {
      display: block;
    }
    &.year {
      .el-input__inner {
        width: 220px;
      }
    }
  }
}
</style>

<!-- 王天宇 -->
